@import "../base/fn";
.pay_success{
	background: url('../../img/gas/pay_background2.jpg') no-repeat center;
	background-size: 100% 100%;
	border-sizing: border-box;
    .setTapColor();
	header{
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 1.24rem;
		img{
			width: 11.28rem;
			height: 10.52rem;
		}
		p{
			font-size: .86rem;
			color: #fff;
		}
	}
	.content{
        padding-top: 1rem;
        padding-bottom: 2rem;
		.content_border{
			width: 92%;
			background: #fff;
			border-radius: 1.7rem;
			margin: 0 auto;
			padding: 1rem 0 1rem 0;
			box-sizing: border-box;
			.goods_detail{
				>h6{
					font-size: 1.12rem;
					color: #000;
					padding: 0 1.36rem;
				}
				.sums{
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					margin-bottom: 1.68rem;
					padding: 0 1.36rem;
					img{
						height: 5.28rem;
						margin: .48rem 0 .2rem 0;
					}
					.sumss{
						width: 65%;
						display: flex;
						justify-content: space-around;
						p,span{
							font-size: .78rem;
							color: #474747;
						}
						p{
							display: flex;
							align-items: center;
						}
					}
				}
				.detail_lists{
					display: flex;
					flex-direction: column;
					position: relative;
					>h2{
						font-size: 1.12rem;
						color: #000;
						white-space: nowrap;
						padding: 0 1.36rem;
					}
					.cashback1,.cashback2{
						padding: 0 1.36rem;
						h6{
							font-size: .78rem;
							color: #000;
							margin-bottom: .3rem;
						}
						p{
							font-size: .76rem;
							color: #7b7b7b;
							span{
								color: #fb0c11;
							}
						}
					}
					.cashback1{
						margin: 1.28rem 0 1.2rem 0;
					}
					.cashback2{
						margin-bottom: 1.1rem;
					}
				}
			}
			.spread_method{
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 0 1rem;
				user-select:none;
				>h2{
					font-size: 1.05rem;
					color: #000;
					margin: 1.6rem 0 .8rem 0;
				}
				.searchs{
					position: relative;
					width: 100%;
					text-align: center;
					input{
						outline: none;
						border: none;
						width: 100%;
						margin: 0 auto;
						height: 1.74rem;
						line-height: 1.74rem;
						font-size: .74rem;
						color: #333;
						padding: .1rem .68rem;
						border: 1px solid #9d9d9d;
						border-radius: .4rem;
						box-sizing: border-box;
					}
					.Search{
						width: 50px;
                        position: absolute;
                        top: 2px;
                        right: 0;
                        display: flex;
                        justify-content: center;
                        height: 25px;
						img{
							height: 17px;margin-top: 3px;
						}
					}
					.store_lists{
						width: 96%;
						overflow: auto;
						position: absolute;
						top: 28px;
						left: 2%;
						background: #ddd;
						display: none;
						text-align: left;
                        border-radius: 0 0 10px 10px;
						li{
							line-height: 1.2;
							font-size: .74rem;
							color: #333;
							padding: 6px .7rem;
							border-bottom: 1px solid #efefef;
							white-space: nowrap;
						}
					}
				}
				.sel_datas{
					width: 100%;
					margin: .8rem 0 0 0;
					.title{
						display: flex;
						align-items: center;
						margin-bottom: 10px;
						p:nth-of-type(1){
							width: 4px;
							height: 15px;
							background: #3d23a5;
							margin: 0 .4rem;
						}
						p:nth-of-type(2){
							font-size: .74rem;
							color: #1c1c1c;
						}
					}
					.sel_data{
						display: flex;
						flex-wrap: wrap;
						justify-content: space-around;
						margin-bottom: .5rem;
						>div{
							border: 1px solid #000;
							border-radius: .4rem;
							padding: 0 .43rem;
							margin-bottom: 1rem;
							background: url('../../img/gas/no_select2.png') no-repeat 95% 5%;
							background-size: 16px 16px;
							box-sizing: border-box;
							p{
								font-size: .74rem;
								color: #1c1c1c;
							}
						}
						.sel{
							background-image: url('../../img/gas/selected2.png') ;
						}
					}
				}
				.select_text{
					font-size: .56rem;
					color: #22c064;
					margin: .93rem 0 .43rem 0;
					display: none;
				}
				.submits{
					outline: none;
					width: 9.61rem;
					height: 2.48rem;
					line-height: 2.48rem;
					font-size: .93rem;
					color: #fff;
					background: linear-gradient(to right,#282cd5 0%,#972af9 100%);
					border: 0;
					border-radius: 1.2rem;
					margin: 1rem 0 0 0;
				}
			}
		}
	}
	footer{
		display: flex;
		flex-direction: column;
		align-items: center;
		background: #290563;
		padding-bottom: 3rem;
		margin: 1.5rem 0 0 0;
		h5{
			font-size: 1rem;
			color: #fff;
			font-weight: 400;
		}
		p{
			font-size: .8rem;
			color: #fff;
		}
	}
	.mask{
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		align-items: center;
		justify-content: center;
		background: rgba(0,0,0,.5);
		z-index: 998;
		display: flex;
		.alerts{
		    width: 80%;
			border-radius: 1.5rem;
			background: #fff;
			z-index: 999;
			display: flex;
			flex-direction: column;
			align-items: center;
			h6{
				font-size: 1.12rem;
				color: #333;
				font-weight: 400;
				margin: 1rem 0 1.36rem 0;
			}
			.information{
				width: 86%;
				margin: 0 auto;
				line-height: 2;
				.com{
					display: flex;
					justify-content: space-between;
					p{
						font-size: .87rem;
						color: #333;
					}
				}
			}
			.options{
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-top: 1px solid #adadad;
				margin-top: 1.1rem;
				p{
					width: 50%;
					height: 3.1rem;
					line-height: 3.1rem;
					text-align: center;
					font-size: .93rem;
					color: #333;
				}
				p:nth-of-type(1){
					border-right: 1px solid #adadad;
				}
			}
		}
	}
}

@media only screen {
    @media (max-width: 374px){
        .pay_success .content .content_border {
            .goods_detail .detail_lists > h2{
                font-size: 1rem;
                padding: 0;
                text-align: center;
            }
            
            .spread_method .sel_datas .sel_data{
            display: block;
            >div{
                background-position-y: 40%;
            }
        }}
    }
}